<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
    .div0 {
        width: 180px;
        height: 180px;
        background: white;
        border: red 1px solid;
    }
</style>


<body>

<input type="button" value="改变class='div0'内所有span的背景色为红色" id="b1"/>
<br><br>

<input type="button" value="改变class='div0'内所有子span的背景色为红色" id="b2"/>
<br><br>

<input type="button" value="改变class='div1'后所有的div的背景色为红色" id="b3"/>
<br><br>

<div class="div0">
    <span>我是div0中的span</span>

    <div class="div1">
        <div>这是div1中的div</div>
        <span>我是div1中的span</span>
    </div>
    <div class="div2">我是div2</div>
    <div class="div3">我是div3</div>
</div>

</body>
</html>
<script type="text/javascript">
    $("#b1").click(function () {
        $(".div0 span").css("background-color","red")
    })
    $("#b2").click(function () {
        $(".div0 > span").css("background-color","red")
    })
</script>